<template>
	<!-- 少多语言 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="" style="height: 24rpx;">

			</view>
			<view class="flex">
				<view class="flex-1">

				</view>
				<view class="topBar A-Medium flex align-center" :class="model=='light'?'topBarLight':''">
					<view @click="changeTopBarIndex(0)" :class="topBarIndex==0?'item1':'item'">
						{{i18n.m001}}
					</view>
					<view @click="changeTopBarIndex(1)" :class="topBarIndex==1?'item1':'item'">
						{{i18n.m002}}
					</view>
				</view>
				<view class="flex-1">

				</view>
			</view>
			<view class="nameList ml-3 flex align-center A-Medium" :class="model=='light'?'nameListLight':''">
				<view @click="changePriceType(index)" class="mr-4 flex align-center justify-center"
					:class="index==priceType?'item1':'item'" v-for="(item,index) in nameList">
					<view v-if="index==0" class="f0" style="margin-right: 6rpx;">
						<image v-if="priceType==0" style="width: 28rpx;height: 28rpx;" src="/static/images/index/9.png"
							mode=""></image>
						<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/8.png" mode="">
						</image>
					</view>
					<view v-else class="f0" style="margin-right: 6rpx;">
						<image v-if="priceType==1" style="width: 28rpx;height: 28rpx;" src="/static/images/index/11.png"
							mode=""></image>
						<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/10.png" mode="">
						</image>
					</view>{{item}}
				</view>
			</view>
			<view class="" style="height: 36rpx;">

			</view>
			<view class="flex align-center">
				<view class="desc ml-3" :class="model=='light'?'descLight':''">
					<template v-if="topBarIndex==0">
						{{i18n.m003}}
					</template>
					<template v-else>
						{{i18n.m004}}
					</template>
				</view>
				<!-- @click="open" -->
				<view v-if="topBarIndex==1" class="time A-Regular flex align-center justify-center"
					:class="model=='light'?'timeLight':''">
					5{{i18n.m017}}
					<!-- {{timeName}} -->
					<!-- <view class="f0">
						<image style="width: 28rpx;height: 28rpx;" src="/static/images/downArrow.png" mode=""></image>
					</view> -->
				</view>
			</view>
			<view class="" style="height: 24rpx;">

			</view>
			<template v-if="topBarIndex==0">
				<!-- 现货btc、eth名称 -->
				<view class="A-Regular" style="overflow: hidden;">
					<view class="flex titleList mb24 align-center" :class="model=='light'?'titleListLight':''">
						<view class="text-alignC" style="width: 132rpx;margin-right: 55rpx;">
							{{i18n.m005}}
						</view>
						<view style="width: 268rpx;">
							{{i18n.m006}}/{{i18n.m007}}
						</view>
						<view style="width: 148rpx;">
							{{i18n.m008}}
						</view>
						<view class="text-alignR mr-3" style="width: 152rpx;">
							{{i18n.m009}}
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 报价表 -->
		<template v-if="topBarIndex==0">
			<view class="A-Regular">
				<template v-if="priceType==0">
					<view v-for="(item,index) in sort(BTCList)" class="flex valueList mb24 align-center"
						:class="model=='light'?'valueListLight':''">
						<view class="flex align-center flex-column justify-center" style="width: 132rpx;margin-right: 55rpx;">
							<view class="f0">
								<image style="width: 30rpx;height: 30rpx;margin-bottom: 4rpx;" :src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exName)+'.png'"
									mode=""></image>
							</view>
							<view class="c1 s1">
								<!-- Binance -->
								{{item.exName}}
							</view>
						</view>
						<view class="flex flex-column" style="width: 268rpx;">
							<!-- BTU/USD -->
							<view class="flex align-center">
								<view class="c2">
									{{priceType==0?'BTC':'ETH'}}
								</view>
								<view class="c1 s1">
									/USDT
								</view>
							</view>
							<view class="s1 c1">
								24H{{i18n4.l007}}${{item.volUsd24h}}{{i18n.m010}}
							</view>
						</view>
						<view class="flex flex-column" style="width: 148rpx;">
							<!-- $63000.58 -->
							<view class="c2">
								{{item.price}}
							</view>
							<view class="c1">
								${{item.price}}
							</view>
						</view>
						<view :class="(item.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'" class="text-alignR mr-3 flex align-center justify-center" style="width: 152rpx;">
							<!-- -6.58% -->
							{{item.priceChangePercent24h}}%
						</view>
					</view>
				</template>
				<template v-if="priceType==1">
					<view v-for="(item,index) in sort(ETHList)" class="flex valueList mb24 align-center"
						:class="model=='light'?'valueListLight':''">
						<view class="flex align-center flex-column justify-center" style="width: 132rpx;margin-right: 55rpx;">
							<view class="f0">
								<image style="width: 30rpx;height: 30rpx;margin-bottom: 4rpx;" :src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exName)+'.png'"
									mode=""></image>
							</view>
							<view class="c1 s1">
								<!-- Binance -->
								{{item.exName}}
							</view>
						</view>
						<view class="flex flex-column" style="width: 268rpx;">
							<!-- BTU/USD -->
							<view class="flex align-center">
								<view class="c2">
									{{priceType==0?'BTC':'ETH'}}
								</view>
								<view class="c1 s1">
									/USDT
								</view>
							</view>
							<view class="s1 c1">
								24H{{i18n4.l007}}${{item.volUsd24h}}{{i18n.m010}}
							</view>
						</view>
						<view class="flex flex-column" style="width: 148rpx;">
							<!-- $63000.58 -->
							<view class="c2">
								{{item.price}}
							</view>
							<view class="c1">
								${{item.price}}
							</view>
						</view>
						<view :class="(item.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'" class="text-alignR mr-3 flex align-center justify-center" style="width: 152rpx;">
							<!-- -6.58% -->
							{{item.priceChangePercent24h}}%
						</view>
					</view>
				</template>
			</view>
		</template>
		<template v-if="topBarIndex==1&&priceType==0">
			<view class="A-Regular ml-3">
				<view class="flex titleList mb24 align-center" :class="model=='light'?'titleListLight':''">
					<view style="width: 190rpx;">
						{{i18n.m011}}
					</view>
					<view class="flex-1 flex align-center justify-between mx-3">
						<view class="">
							{{i18n.m012}}
						</view>
						<view class="">
							{{i18n.m013}}
						</view>
					</view>
				</view>
				<view class="A-Regular">
					<view v-for="(item,index) in sort2(BTCList2)" class="flex valueList align-center"
						:class="model=='light'?'valueListLight':''" style="margin-bottom: 16rpx;">
						<view class="flex align-center" style="width: 190rpx;">
							<view class="f0">
								<image style="width: 42rpx;height: 42rpx;margin-right: 8rpx;"
									:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exchange)+'.png'" mode=""></image>
							</view>
							<view class="c2">
								<!-- Binance -->
								{{item.exchange}}
							</view>
						</view>
						<view class="flex-1 flex align-center mx-3">
							<view class="flex-1 flex align-center justify-end"
								style="background: #D22540;border-radius: 8rpx;height: 48rpx;overflow: hidden;position: relative;">
								<view class="flex-1 text-alignC textb">
									
									<view class="flex align-center" style="white-space:nowrap;height: 48rpx;position: absolute;left: 40rpx;top: 0;">
										{{item.buyRatio}}%
									</view>
								</view>
								<view class="text-alignC textb"
									style="background: #53D290;height: 48rpx;" :style="'width:'+item.sellRatio+'%;'">
									
									<view class="flex align-center" style="white-space:nowrap;height: 48rpx;position: absolute;right: 40rpx;top: 0;">
										{{item.sellRatio}}%
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="topBarIndex==1&&priceType==1">
			
			<view class="A-Regular ml-3">
				<view class="flex titleList mb24 align-center" :class="model=='light'?'titleListLight':''">
					<view style="width: 190rpx;">
						{{i18n.m011}}
					</view>
					<view class="flex-1 flex align-center justify-between mx-3">
						<view class="">
							{{i18n.m012}}
						</view>
						<view class="">
							{{i18n.m013}}
						</view>
					</view>
				</view>
				<view class="A-Regular">
					<view v-for="(item,index) in sort2(ETHList2)" class="flex valueList align-center"
						:class="model=='light'?'valueListLight':''" style="margin-bottom: 16rpx;">
						<view class="flex align-center" style="width: 190rpx;">
							<view class="f0">
								<image style="width: 42rpx;height: 42rpx;margin-right: 8rpx;"
									:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exchange)+'.png'" mode=""></image>
							</view>
							<view class="c2">
								<!-- Binance -->
								{{item.exchange}}
							</view>
						</view>
						<view class="flex-1 flex align-center mx-3">
							<view class="flex-1 flex align-center justify-end"
								style="background: #D22540;border-radius: 8rpx;height: 48rpx;overflow: hidden;position: relative;">
								<view class="flex-1 text-alignC textb">
									<view class="flex align-center" style="white-space:nowrap;height: 48rpx;position: absolute;left: 40rpx;top: 0;">
										{{item.buyRatio}}%
									</view>
								</view>
								<view class="text-alignC textb"
									style="background: #53D290;height: 48rpx;" :style="'width:'+item.sellRatio+'%;'">
									<view class="flex align-center" style="white-space:nowrap;height: 48rpx;position: absolute;right: 40rpx;top: 0;">
										{{item.sellRatio}}%
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<bzPoup ref="bzPoup" :type="2" @confirm="confirm"></bzPoup>
	</view>
</template>

<script>
	import bzPoup from '@/components/bzPoup.vue';
	export default {
		components: {
			bzPoup
		},
		data() {
			return {
				topBarIndex: 0,
				nameList: ['BTC', 'ETH'],
				priceType: 0,
				timeName: '5m',
				list: [],
				isOpen:false,
			}
		},
		computed: {
			i18n() {
				return this.$t('market')
			},
			i18n4() {
				return this.$t('last3')
			},
			model() {
				return this.$store.state.config.model
			},
			BTCList() {
				return this.$store.state.config.BTCList;
			},
			ETHList() {
				return this.$store.state.config.ETHList;
			},
			BTCList2() {
				return this.$store.state.config.BTCList2;
			},
			ETHList2() {
				return this.$store.state.config.ETHList2;
			}
		},
		onTabItemTap(e){
			this.$tool.setStatusBarStyle(this.model);
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		onLoad() {
			this.$store.dispatch('config/getTakerBuySellVolumeBTC',this.timeName);
			this.$store.dispatch('config/getTakerBuySellVolumeETH',this.timeName);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		methods: {
			changeTopBarIndex(e) {
				if (this.topBarIndex == e) {
					return;
				}
				this.isOpen = false;
				this.$refs.bzPoup.closePopup();
				this.topBarIndex = e;
				this.priceType = 0;
			},
			changePriceType(e) {
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
			},
			open() {
				if(!this.isOpen){
					this.isOpen = true;
					this.$refs.bzPoup.open();
				}else{
					this.isOpen = false;
					this.$refs.bzPoup.closePopup();
				}
			},
			confirm(e) {
				this.list = [];
				this.timeName = e.title;
				if (this.priceType == 0) {
					// this.BTCList2 = [];
					this.$store.state.config.BTCList2 = [];
				} else {
					// this.ETHList2 = [];
					this.$store.state.config.ETHList2 = [];
				}
				this.$store.commit("config/set_emptyTYpe",e.title);
			},
			sort(arr){
				return arr.slice().sort((a, b) => a.exName.localeCompare(b.exName))
			},
			sort2(arr){
				return arr.slice().sort((a, b) => a.exchange.localeCompare(b.exchange))
			}
		}
	}
</script>

<style scoped lang="scss">
	.mb14 {
		margin-bottom: 14rpx;
	}

	.mb24 {
		margin-bottom: 24rpx;
	}

	.desc {
		font-size: 24rpx;
		color: #AAACB8;
	}

	.descLight {
		color: #0E0F11;
	}

	.textb {
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.time {
		margin-left: 28rpx;
		width: 120rpx;
		height: 50rpx;
		background: #1F2128;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.timeLight {
		color: #0E0F11;
		background: #FFFFFF;
	}

	.topBar {
		background: rgba(28, 39, 61, 0.3);
		border-radius: 102rpx;
		border: 2rpx solid rgba(127, 131, 141, 0.3);

		.item {
			padding: 14rpx 28rpx;
			font-size: 28rpx;
			color: #7F838D;
		}

		.item1 {
			padding: 14rpx 28rpx;
			font-size: 28rpx;
			color: #F7F7F7;
			background: #5951BA;
			border-radius: 10000rpx;
		}
	}

	.topBarLight {
		background: #FFFFFF;
	}

	.nameList {
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}

	// 报价表
	.titleList {
		font-size: 24rpx;
		color: #AAACB8;
	}

	.titleListLight {
		color: #0E0F11;
	}

	.valueList {
		font-size: 24rpx;
		.c1 {
			color: #7F838D;
		}
		.c2 {
			color: #F7F7F7;
		}
		.s1 {
			font-size: 20rpx;
		}
	}

	.valueListLight {
		.c2 {
			color: #0E0F11;
		}
		color: #7F838D;
	}

	.valueItem1 {
		color: #AAACB8;
	}

	.valueItem1Light {
		color: #7F838D;
	}

	.valueItem2 {
		font-size: 24rpx;
		color: #f7f7f7;
		background: #53D290;
		width: 108rpx;
		height: 52rpx;
		border-radius: 8rpx;
	}

	.valueItem3 {
		font-size: 24rpx;
		color: #f7f7f7;
		background: #D22540;
		width: 108rpx;
		height: 52rpx;
		border-radius: 8rpx;
	}
</style>